<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #ccc;
    }

    #app {
        width: 400px;
        margin: 20px auto;
        background-color: #fff;
        border: 4px solid blueviolet;
        border-radius: 1em;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
        padding: 1em 2em 2em;
    }

    h3 {
        text-align: center;
    }

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 1em;
    }

    .title h4 {
        line-height: 2;
        margin: 0;
    }

    .container {
        border: 1px solid #ccc;
        padding: 0 1em;
    }

    .btn {
        /* 鼠标改成手的形状 */
        cursor: pointer;
    }
</style>

<body>
    <div id="app">
        <h3>组件子传父</h3>
        <!-- 
         步骤
        1. 在父组件中，使用子组时，给它添加自定义事件的监听及回调
            @是事件监听。v-on的简写
            自定义事件名1： 一般建议用烤串写法写名字
        <父组件>
          <子组件 
            @自定义事件名1="处理事件的回调函数，是父组件的方法"
            @自定义事件名2="处理事件的函数2">
          </子组件>
        </父组件>
        2. 在子组件中，某个时刻（你自己定义的）主动抛出事件
        this.$emit(自定义事件名1, 你要传出去的数据) 
        这里的this是指子组件。$emit 是系统提供的方法

       结果是：当子组件中发生某事时，会调用父组件中的方法
      -->
        <lao-wang></lao-wang>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        Vue.component('XiaoWang', {
            template: `
            <div>
                <button @click="h2" >
                    点击
                </button>
            </div>
            `,
            methods: {
                h2() {
                    this.$emit('abc', { name: '墨林', action: '打了我' })
                }
            }
        })
        Vue.component('LaoWang', {
            template: `
            <div>
                当子组件中发生abc这个事件时，就会执行h1， 同时h1会自动接收参数
                <xiao-wang @abc="h1" >

                </xiao-wang>
            </div>
            `,
            methods: {
                h1(obj) {
                    console.log('6666666', obj);
                }
            }
        })
        new Vue({
            el: '#app',
        })
    </script>
</body>

</html>